/* eslint-disable react/prop-types */
// PortalEditor.tsx

import React, { useState, useRef, useEffect } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import "./index.less"; // 引入样式文件
// import "react-grid-layout/css/styles.css";
// import "react-resizable/css/styles.css";
import "./style/gridLayout.less";
import "./style/resizable.less";
import { useDrop, useDrag } from "ahooks";
import { Layout, Space, theme } from "antd";
import Navbar from "./navbar";
import { uniqueId } from "ut2";
const { getDesignToken } = theme;
import * as Icons from "@ant-design/icons";
const globalToken = getDesignToken();
import { findIndex } from "lodash-es";
const headerStyle: React.CSSProperties = {
	height: 55,
	paddingInline: 20,
	position: "fixed",
	insetBlockStart: "0",
	insetInlineEnd: "0",
	width: "100%",
	boxShadow: "0 0 8px 0 rgba(0,0,0,.1)",
	zIndex: 99,
	lineHeight: "55px",
	backgroundColor: globalToken.colorBgBase
};
import WelcomeCard from "./packages/Welcome";
import * as packages from "./packages";
import { CloseOutlined, DeleteOutlined } from "@ant-design/icons";
const GridLayout = WidthProvider(Responsive);
const DragItComponent: React.FC<any> = ({ componentProps }) => {
	const dragRef = useRef(null);
	const customIcons: { [key: string]: any } = Icons;
	const [dragging, setDragging] = useState(false);

	useDrag(componentProps, dragRef, {
		onDragStart: () => {
			setDragging(true);
		},
		onDragEnd: () => {
			setDragging(false);
		}
	});

	return (
		<div ref={dragRef} className="sidebar-component">
			<Space>
				{React.createElement(customIcons[componentProps.icon])}
				{componentProps.title}
			</Space>
		</div>
	);
};

const Components = [
	{
		name: "Welcome",
		type: "Welcome",
		icon: "TeamOutlined",
		title: "用户欢迎组件",
		layout: {
			x: 0,
			y: 0,
			w: 8,
			h: 2,
			minW: 4,
			minH: 2,
			maxH: 4,
			static: false
		}
	},
	{
		name: "Weather",
		type: "Weather",
		icon: "MoonOutlined",
		title: "天气组件",
		layout: {
			x: 0,
			y: 0,
			w: 4,
			h: 7,
			minW: 4,
			maxW: 5,
			minH: 7,
			maxH: 8,
			static: false
		}
	},
	{
		name: "QuickAccess",
		type: "QuickAccess",
		icon: "GoldOutlined",
		title: "快捷入口",
		layout: {
			x: 0,
			y: 0,
			w: 8,
			h: 6,
			minW: 6,
			maxW: 12,
			minH: 6,
			// maxH: 6,
			static: false
		}
	},
	{
		name: "AppList",
		type: "AppList",
		icon: "AppstoreOutlined",
		title: "应用入口",
		layout: {
			x: 0,
			y: 0,
			w: 8,
			h: 4,
			minW: 6,
			maxW: 12,
			minH: 4,
			// maxH: 6,
			static: false
		}
	}
] as any;
const createComponent = (component: any) => {
	const customComponent: { [key: string]: any } = packages;

	return (
		<div className="dashboard-widget-wrapper" key={component.layout.i} data-grid={component.layout}>
			<span className="dashboard-widget-header">
				{/* onClick={() => onRemoveWidget(widget)} */}
				<DeleteOutlined className={"dashboard-widget-header-icon"} />
			</span>
			{React.createElement(customComponent[component.name])}
		</div>
	);
};

const PortalEditor: React.FC = () => {
	const [components, setComponents] = useState<any>([]);
	const [layout, setLayout] = useState<any>([]);
	const dropRef = useRef(null);
	const [currentCols, setCurrentCols] = useState<number>(12);

	//左侧菜单拖动
	useDrop(dropRef, {
		onDom: (newComponent: any) => {
			const newComponentCompunt = { ...newComponent };
			newComponentCompunt.layout.i = String(newComponent.name + Math.floor(Math.random() * (100 - 1) + 1));
			setComponents([...components, newComponentCompunt]);
		}
	});
	const getLayouts: any = () => {
		return components.map(item => item.layout);
	};
	const onBreakpointChange = (newBreakpoint: string, newCols: number) => {
		setCurrentCols(newCols);
	};
	const onLayoutChange = (layouts: any[]) => {
		for (const layout of layouts) {
			const updateIndex = findIndex(components, w => w.layout.i === layout.i);
			if (updateIndex !== -1) {
				const updateComponent = components[updateIndex];
				updateComponent.layout = layout;
				components.splice(updateIndex, 1, { ...updateComponent });
			}
		}

		const newComponents = [...components];
		setComponents(newComponents);
	};
	return (
		<Layout>
			<Layout.Header style={headerStyle}>
				<Navbar />
			</Layout.Header>
			{/* 左侧区域 */}
			<Layout.Sider
				style={{
					marginTop: "55px",
					background: "white",
					padding: "10px",
					height: "calc(100vh - 55px)"
				}}
				theme="light"
				trigger={null}
				collapsed={false}
				collapsible
				width={200}
			>
				{Components.map((item: any, index: React.Key | null | undefined) => {
					return <DragItComponent key={index} componentProps={item} />;
				})}
			</Layout.Sider>
			{/* 中间区域 */}
			<div className="main-content" ref={dropRef}>
				<GridLayout
					margint={[10, 10]}
					layouts={getLayouts()}
					onBreakpointChange={onBreakpointChange}
					className="layout"
					cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
					breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
					rowHeight={30}
					// autoResize
					// @ts-ignore
					onLayoutChange={onLayoutChange}
					width={1200}
				>
					{/* 渲染所有组件 */}
					{components.map((component: { id: string; name: string; type: string; title: string; layout: any }) =>
						createComponent(component)
					)}
				</GridLayout>
			</div>

			{/* 右侧显示属性 */}
			<div className="properties-panel">Properties</div>
		</Layout>
	);
};

export default PortalEditor;
